<!-- TimePicker.vue -->
<template>
	<view class="time-picker">
		<!-- 日期选择器 -->
		<picker mode="date" v-model="selectedDate" start="2020-01-01" end="2050-12-31" @change="onDateChange">
			<view class="picker">
				{{ selectedDate || '请选择日期' }}
			</view>
		</picker>

		<!-- 时间选择器 -->
		<picker mode="time" v-model="selectedTime" @change="onTimeChange">
			<view class="picker">
				{{ selectedTime || '请选择时间' }}
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedDate: '',
				selectedTime: ''
			};
		},
		methods: {
			// 处理日期变化
			onDateChange(e) {
				this.selectedDate = e.detail.value;
				this.emitSelectedTime();
			},
			// 处理时间变化
			onTimeChange(e) {
				this.selectedTime = e.detail.value;
				this.emitSelectedTime();
			},
			// 触发父组件获取的时间
			emitSelectedTime() {
				if (this.selectedDate && this.selectedTime) {
					const fullDateTime = `${this.selectedDate} ${this.selectedTime}`;
					console.log('传递的时间:', fullDateTime); // 添加调试语句
					this.$emit('modelValue', fullDateTime);
				}
			}

		}
	};
</script>

<style scoped>
	.picker {
		margin: 10px 0;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		background-color: #fff;
	}
</style>